<template>
	<view class="">
		<view class="member-center">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				会员开通
			</view>
		</view>
		<view class="box">
			<image :src="member_imgae" mode="" class="box_img"></image>
			<view class="box_title">
				{{title}}
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					实收金额
				</view>
				<view class="right">
					¥{{amount}}
				</view>
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					扣款金额
				</view>
				<view class="right">
					¥{{cost_price}}
				</view>
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					收益
				</view>
				<view class="right">
					¥{{income}}
				</view>
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					充值号码
				</view>
				<view class="right">
					{{member_tel}}
				</view>
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					充值时间
				</view>
				<view class="right">
					{{pay_time}}
				</view>
			</view>
			<view class="flex items-center paddingLeft-60 paddingBottom-30">
				<view class="left">
					激活时间
				</view>
				<view class="right">
					{{start_time||''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const id = ref('')
	const balanceviewApi = inject('balanceview')
	const member_imgae = ref('')
	const title=ref('')
	const cost_price=ref('')
	const income=ref('')
	const amount=ref('')
	const pay_time=ref('')
	const start_time=ref('')
	const member_tel=ref('')
	onLoad((opt) => {
		id.value = opt.id
		getDetail()
	});
	const back = () => {
		uni.navigateBack()
	}

	const getDetail = () => {
		balanceviewApi({
			pay_id: id.value
		}).then(res => {
			console.log(res)
			member_imgae.value = res.member_imgae
			amount.value=res.amount
			cost_price.value=res.cost_price
			income.value=res.income
			title.value=res.title
			pay_time.value=res.pay_time
			member_tel.value=res.member_tel
			start_time.value=res.start_time
		})
	}
</script>

<style scoped lang="scss">
	.member-center {
		width: 100%;
		height: 216rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.box {
		width: 686rpx;
		height: 562rpx;
		background: #FAFAFA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 100rpx auto 0;
		position: relative;

		.box_img {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			top: -40rpx;
		}
		.box_title{
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
			padding: 56rpx 0 60rpx 0;
		}
		.left{
			width: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}
		.right{
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
		}
	}
</style>